<template>
	<view class="con">
		<view class="info-one">检测到您的设备已开启{{natnums}}个网卡</view>
		<view class="info-two">请选择一个为管理线路网卡:</view>
		
		<view class="nat-card" v-for="(item,index) in interfaces" :key="index" :class="{'active': rSelect === index}"  @tap="tapInfo(index)">
			网卡：{{item.netDevName}} | 速率：{{item.speed}} | ip: {{item.ip}}
		</view>
		
		<view class="foot">
			<view class="tip">
				注：如您无法确定管理线路网卡，请<text>拔掉数据线路</text>，仅<text>保留管理线路</text>
			</view>
			<view class="buttons">
				<view class="button-pass">
					跳过管理线路配置
				</view>
				<view class="button-yes" @tap="confim">
					确认管理线路网卡
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let App = getApp()
	export default {
		data() {
			return {
				natnums:2,
				nodeID:'',
				interfaces:[],
				rSelect:''
			}
		},
		
		onLoad(option) {
			this.nodeID = option.nodeID
			this.natInfo()
		},
		methods: {
			
			//获取网络信息
			natInfo(){
				uni.showLoading({
					title:'加载中'
				})
				
				this.$api.interfaceApi('interfaces')({
					sys:App.globalData.sys,
					node_id:this.nodeID
				}).then(result=>{
					uni.hideLoading();
					if(result.code == 200){
						this.interfaces = result.data
					}else{
						uni.showToast({
							title:"获取失败",
							icon:'none'
						})
					}
				})
				
			},
			
			/* tapInfo(e) {
				console.log(this.rSelect )//是数组，数组也有indexOf
				if (this.rSelect.indexOf(e) == -1) {
					console.log(e)//打印下标
					this.rSelect.push(e);//选中添加到数组里
				} else {
					this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
				}
			}, */
			
			tapInfo(e) {
				if (this.rSelect === e) {
					this.rSelect = ''
				} else {
					this.rSelect = e
				}
			},
			
			confim(){
				uni.navigateTo({
					url:'/pages/index/data-config?nodeID='+this.nodeID+'&rSelect='+this.rSelect
				})
			}
		}
	}
</script>

<style lang="scss">
	.con{
		padding: 10rpx 40rpx;
		
		.info-one{
			color: #6f6b6b;
			font-size: 26rpx;
			padding: 10rpx 0 0 0 ;
		}
		
		.info-two{
			padding: 0 0 10rpx 0;
			font-size: 26rpx;
		}
		
		.nat-card{
			margin: 30rpx 0;
			background-color: #eaeaea;
			padding: 10rpx;
			font-size: 26rpx;
			border-radius: 10rpx;
		}
		.active{
			background-color: #00a9e1;
			color:#FFFFFF;
		}
		
		
		.foot{
			position: fixed;
			bottom: 0;
			left: 0;
			border-top: 2rpx solid #eaeaea;
			box-shadow: 0rpx 0rpx 10rpx 0rpx #d4cdcd;
			height: 260rpx;
			padding: 20rpx;
			width: 100%;
			box-sizing: border-box;
			.tip{
				margin-top: 20rpx;
				text-align: center;
				font-size: 28rpx;
				
				text{
					color: #ffaa00;
				}
			}
			
			.buttons{
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
				
				.button-pass{
					padding: 20rpx 50rpx;
					border-radius: 20rpx;
					border: 2rpx solid #eaeaea;
					font-size: 30rpx;
				}
				
				.button-yes{
					padding: 20rpx 50rpx;
					border: 2rpx solid #FFFFFF;
					color: #FFFFFF;
					border-radius: 20rpx;
					font-size: 30rpx;
					background: linear-gradient(to right , #00a9e1 , #0055ff);
				}
			}
			
			
		}
		
	}
</style>
